

function projectReportForm(griddata){
	var projectId = griddata.get('id'); 
	
	 
	var memberStore = CRM.commons.createStore('memberStoreid', CRM.SPComp.memberDataArray,'project/memberReportListByProjectId?memberProjectId='+projectId);
	
	 var  tpl = new Ext.XTemplate( 
			 
			 '<table width="80%">',
			 '<tr><td width="15%" align = "left"><b>Member Name</b></td><td width="30%" align = "left"><b>Company Name</b></td><td align = "left" width="20%"><b>Email</b></td><td align = "center" width="15%"><b>Mobile Number</b></td></tr>',
			 '<tpl for="."><div class="tpl-item" style="margin-top:10px;" align="left">',
			    '<tr><td align = "left">{firstName}</td>', 
			    '<td align = "left">{companyName}</td>',
			    '<td align = "left">{email}</td>',
			    '<td align = "center">{phone1}</td></tpl></div>',
			    '</td></tr></table>');
	
	var projectReportFormPanel = {
			xtype		: 'fieldset',
			title		: 'Project Information',
			border 		: false,
			id			: 'projectReportFormPanel',
			width		: '100%',
			layout      : 'form',
			autoHeight  : true,
			items		: [
			     		   {
								layout  : 'hbox',
								border  : false,
							    defaults: {
						             style: 'margin: 0 5px 5px 0'
						         },
						    	 items 	: [{ xtype : 'label', html :'<b>Project Name:</b>',width : 127},
											{ xtype:'displayfield',id:'projectNameReport',width : 400,flex : 3,border  : false}]
										
							},
				            {
			                	layout  : 'hbox',
			                	border  : false,
							    defaults: {
						    		 	frame	:false,
						             	style	: 'margin: 0 5px 5px 0'
						         },
						    	 items		:[{
													xtype 	: 'compositefield', 
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Status:</b>',flex: 3},
													      	   { xtype:'displayfield',id:'statusReport',flex: 3}]
												},
												{
													xtype 	: 'compositefield', 
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Priority:</b>',flex: 3},
													      	   { xtype:'displayfield',id:'priorityReport',flex: 3}]
											}]
							},
							{
								layout  : 'hbox',
								border  : false,
							     defaults: {
						             frame:false,
						             style: 'margin: 0 5px 5px 0'
						         },
						    	 items		:[
												{
													xtype 	: 'compositefield', 
													layout 	: 'form',
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Actual Start Date:</b>',flex: 3},
													      	   { xtype:'displayfield',id:'actualStartDateReport',flex: 3}]
												},
												{
													xtype 	: 'compositefield', 
													layout 	: 'form',
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Actual End Date:</b>',flex: 3},
													      	   { xtype:'displayfield',id:'actualEndDateReport',flex: 3}]
												}]
							},
							{
								layout  : 'hbox',
								border  : false,
							    defaults: {
						             frame:false,
						             style: 'margin: 0 5px 5px 0'
						         },
						    	 items		:[{
												xtype 	: 'compositefield', 
												layout 	: 'form',
												width 	: 250,
												items 	: [{ xtype : 'label', html :'<b>Actual Budget:</b>',flex: 1},
												      	   { xtype:'displayfield',id:'actualBudgetReport',flex: 1}]
											},
											{
												xtype 	: 'compositefield', 
												layout 	: 'form',
												width 	: 250,
												items 	: [{ xtype : 'label', html :'<b>Actual Hours:</b>',flex: 1},
												      	   { xtype:'displayfield',id:'actualHrsReport',flex: 1}]
											}]
							},
							{
								layout  : 'hbox',
								border  : false,
							    defaults: {
						             style: 'margin: 0 5px 5px 0'
						         },
						    	 items 	: [{ xtype : 'label', html :'<b>Project Details:</b>',width : 127},
											{ xtype:'displayfield',id:'projectDetailsReport',width : 400,flex : 1,border  : false}]
										
							}]   		   
		};
    	
	var customerReportFormPanel = {
			xtype		: 'fieldset',
			title		: 'Customer Information',
			id			: 'customerReportFormPanel',
			width		: '100%',
			layout      : 'form',
			border 		: false,
			autoHeight  : true,
			items		: [{
							layout  : 'hbox',
							border  : false,
				            defaults: {
					             frame:false,
					             style: 'margin: 0 5px 5px 0'
					         },
					    	 items		:[{
												xtype 	: 'compositefield', 
												layout 	: 'form',
												width 	: 250,
												items 	: [{ xtype : 'label', html :'<b>Customer Name:</b>',flex: 1},
												      	   { xtype:'displayfield',id:'customerName',flex: 1}]
								            }]
			                },
				            {
			                	layout  : 'hbox',
			                	border  : false,
							     defaults: {
						             frame:false,
						             style: 'margin: 0 5px 5px 0'
						         },
						    	 items		:[{
													xtype 	: 'compositefield', 
													layout 	: 'form',
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Company Name:</b>',flex: 1},
													      	   { xtype:'displayfield',id:'companyName',flex: 1}]
												},
												{
													xtype 	: 'compositefield', 
													layout 	: 'form',
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>E-mail:</b>',flex: 1},
													      	   { xtype:'displayfield',id:'emailId',flex: 1}]
											}]
							},
							{
								layout  : 'hbox',
								border  : false,
							    defaults: {
						             frame:false,
						             style: 'margin: 0 5px 5px 0'
						         },
						    	 items		:[{
													xtype 	: 'compositefield', 
													layout 	: 'form',
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Mobile Number:</b>',flex: 1},
													      	   { xtype:'displayfield',id:'mobileNumber',flex: 1}]
												},
												{
													xtype 	: 'compositefield', 
													layout 	: 'form',
													width 	: 250,
													items 	: [{ xtype : 'label', html :'<b>Fax-Number:</b>',flex: 1},
													      	   { xtype:'displayfield',id:'faxNumber',flex: 1}]
											}]
							}
							]   		   
		};
    	
	
	var memberReportFormPanel = {
			  xtype		: 'fieldset',
			  id		: 'memberReportFormPanel',
			  title 	: 'Assigned Member Information',
			  collapsible: false,
			  border 	: false,
			  autoHeight: true,
			  width		: '100%',
			  //autoScroll: true,
		      items		:  [{
			                    xtype     : 'dataview',
								tpl	      :tpl,
								store     :memberStore
								//itemSelector: 'div.search-item'
					        }]   
		};
    	
	 
    	
			var projectReportPanel = new Ext.FormPanel({
		        id          : 'projectReportPanel',
		        height      : 550,
		        width       : 600,
		        frame       : false,
		        autoScroll  : true,
		        border    	: false,
		        layout      : 'border',
		        items       : [{ 
		                    	   xtype : 'panel', region : 'north',id : 'northPeriod', height : 30, width : 70,
		                    	   frame : false, html : '<H1 align="center">Project Detail Report</H1> '
			 	               },
			 	               {
			 	            	   xtype  : 'panel', region : 'west', width : '30%', border : false  
			 	               },
		                       {
			 	            	   xtype:'panel', region: 'center',id:'centerPeriod',frame : false,border : false,
			 	                   items:[projectReportFormPanel,customerReportFormPanel,memberReportFormPanel]
			 	               },
			 	               {
			 	            	   xtype : 'panel', region : 'east', width  : '30%', border : false  
			 	               },
			 	               {
					     		   xtype       : 'hidden',
					     		  id          : 'projectReportId',
					     		   fieldLabel  : 'Project Id'
					     	   }],
			     	  bbar        : {
	    	                  xtype       : 'toolbar',buttonAlign : 'right',
	    	                  items       : [{
											    xtype   : 'button',
											    id		: 'printButton',
											    text    : 'Print',
											    handler : function(){ window.print();}
											 },'-',
											 {
					                                xtype   : 'button',
					                                id		: 'cancelButton',
					                                text    : 'Cancel',
					                                handler : closeProjectReportWindow
					                         }]
	            }
			 
		    });
			
    	 
    	  projectReportwin = new Ext.Window({
	   		   id          : 'projectReportWindow',
	   		   width       : '80%',
	   		   height      : '100%',
	   		   layout      : 'fit',
	   		   border      : false,
	           plain       : false,
	           closable    : true,
	           collapsible : false,
	           animCollapse: false,
	           draggable   : true,
	           maximizable : false,
	           onEsc	   : false,
	           model	   : false,  
	           
	           items       : [projectReportPanel]
	          	});
    	  
    	  showProjectReport(griddata);
    	  projectReportwin.show(this); 
    	  return projectReportwin;
    };
    
  
	
	function showProjectReport(griddata){
		 var projectId =  griddata.get('id');
		 
		 var formPanel = Ext.getCmp('projectReportPanel');
	     Ext.Ajax.request({
			 method  : 'GET',
			 url     : 'project/showProjectReport?projectId='+projectId,
			 success : function(result,request) {
			 			formPanel.getForm().load(request);
		 			},
	     	 failure:function() { 
	         		  alert ("Failure");
	         	}  
		});
		
	};
	
	function closeProjectReportWindow()
	{
		projectReportwin.close();
		
	};
